<template>
	<view style="height: 100vh;">
		<view class="nav">
			<view class="flex_between" style="padding-left: 30%;">
				<view class="nav_title">
					<view :class="{'active':isActive==1}" @click="chenked(1)">
						待审批
					</view>
				</view>
				<view class="nav_title">
					<view :class="{'active':isActive==2}" @click="chenked(2)">
						已审批
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索框 -->
		<view style="height: 40px;background-color: white;margin-top: 10px;width: 100%;padding-top: 8px;">
			<input type="text" placeholder="请输入搜索关键词" placeholder-style="text-align:center;font-size:10px;color:#999;"
				style="border-radius: 10px;width: 80%;background-color: #eee;margin: auto;height: 30px;text-align: center;"
				v-model="searchKey" confirm-type="search" @change="changeSearch"></input>
		</view>
		<!-- 待审批 -->
		<view v-if="isActive==1">
			<view class="unvisit_block" v-for="(item,index) in unApprovalList" :key="index" @click="fnChecked(item)">
				<view class="unvisit_line">
					<view>会议室名称:</view>
					<view class="unvisit_line_value" v-if="item.broadroomName!=null">{{item.broadroomName}}</view>
				</view>
				<view class="unvisit_line">
					<view>企业名称:</view>
					<view class="unvisit_line_value" v-if="item.compName!=null">{{item.compName}}</view>
				</view>
				<view class="unvisit_line">
					<view>会议地点:</view>
					<view class="unvisit_line_value" v-if="item.broadroomAddress!=null">{{item.broadroomAddress}}</view>
				</view>
				<view class="unvisit_line">
					<view>联系人:</view>
					<view class="unvisit_line_value" v-if="item.userName!=null">{{item.userName}}</view>
				</view>
				<view class="unvisit_line">
					<view>预定时间段:</view>
					<view class="unvisit_line_value" v-if="item.bookStart!=null">{{item.bookStart}}~{{item.bookEnd}}
					</view>
				</view>
			</view>
		</view>
		<!-- 已审批 -->
		<view v-if="isActive==2">
			<view class="visit_block" v-for="(item,index) in approvalList" :key="index">
				<view class="visit_line">
					<view>会议室名称:</view>
					<view class="visit_line_value" v-if="item.broadroomName!=null">{{item.broadroomName}}</view>
				</view>
				<view class="visit_line">
					<view>企业名称:</view>
					<view class="visit_line_value" v-if="item.compName!=null">{{item.compName}}</view>
				</view>
				<view class="visit_line">
					<view>会议地点:</view>
					<view class="visit_line_value" v-if="item.broadroomAddress!=null">{{item.broadroomAddress}}</view>
				</view>
				<view class="visit_line">
					<view>联系人:</view>
					<view class="visit_line_value" v-if="item.userName!=null">{{item.userName}}</view>
				</view>
				<view class="visit_line">
					<view>预定时间段:</view>
					<view class="visit_line_value" v-if="item.bookStart!=null">{{item.bookStart}}~{{item.bookEnd}}
					</view>
				</view>
				<view class="visit_line">
					<view>审批时间:</view>
					<view class="visit_line_value" v-if="item.approverTime!=null">{{item.approverTime}}</view>
				</view>
				<view class="visit_line">
					<view>审批人:</view>
					<view class="visit_line_value" v-if="item.approverName != null">{{item.approverName}}</view>
				</view>
				<view class="visit_line">
					<view>审批状态:</view>
					<view class="visit_line_value">
						<text class="unchecked" v-if="item.approverState=='0'">待审核</text>
						<text class="success" v-else-if="item.approverState=='1'">通过</text>
						<text class="unpass" v-else-if="item.approverState=='2'">拒绝</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 审批弹出框 -->
		<uni-popup class="finish-popup" ref="popup" type="bottom">
			<view style="padding: 20px;background-color: white;">
				<button @click="passApproval">通过审批</button>
				<button style="margin-bottom: 0px;background-color: #fb8d8d;" @click="unPassApproval('是否拒绝该请求')">拒绝审批</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		listBook,
		updateBook,
		listBookTime
	} from '@/common/js/api/bookRecord.js'
	export default {
		data() {
			return {
				isActive: 1,
				//当前点击对象
				currentData: {},
				//已审批列表
				approvalList: [],
				//待审批列表
				unApprovalList: [],
				//登陆用户信息
				userInfo: "",
			}
		},
		onLoad() {
			this.getBookRecord()
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			chenked(type) {
				this.isActive = type
			},
			fnChecked(data) {
				this.currentData = data
				this.$nextTick(function() {
					this.$refs.popup.open()
				})

			},
			//获取会议室预定列表
			getBookRecord(searchKey) {
				this.approvalList = []
				this.unApprovalList = []
				let param = {
					'compName': searchKey,
				}
				listBook(param).then(res => {
					let totalList = res.rows
					for (let i in totalList) {
						if (totalList[i].approverState === '0') {
							this.unApprovalList.push(totalList[i])
						} else {
							this.approvalList.push(totalList[i])
						}
					}
				})
			},
			happenTimeFun(num) { //时间戳数据处理
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			//通过审核
			passApproval() {
				let that = this
				let date = this.happenTimeFun(new Date())
				console.log("+++");
				console.log(this.currentData);
				console.log("+++");
				listBookTime(this.currentData).then(res => {
					console.log(res);
					if (res.data.length > 0) {
						this.unPassApproval("该时间段会议室已被预约成功，是否拒绝该请求？")
					} else {
						this.currentData.approverTime = date
						this.currentData.approverState = '1'
						this.currentData.approverName = this.userInfo.sysUser.userName
						uni.showModal({
							title: '提示',
							content: '确认通过该请求？',
							success: function(res) {
								if (res.confirm) {
									updateBook(that.currentData).then(res => {
										that.isActive = 2
										that.$refs.popup.close()
										that.getBookRecord()
									})
								} else if (res.cancel) {}
							}
						})
					}

				})

			},
			//拒绝审核
			unPassApproval(content) {
				let that = this
				let date = this.happenTimeFun(new Date())
				this.currentData.approverTime = date
				this.currentData.approverState = '2'
				this.currentData.approverName = this.userInfo.sysUser.userName
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res) {
						if (res.confirm) {
							updateBook(that.currentData).then(res => {
								that.isActive = 2
								that.$refs.popup.close()
								that.getBookRecord()
							})
						} else if (res.cancel) {}
					}
				})
			},
			//关键字搜索
			changeSearch() {
				this.getBookRecord(this.searchKey)
			}
		}
	}
</script>

<style lang="scss" scoped>
	//button样式
	button {
		width: 95%;
		background-color: #1884eb;
		margin: auto;
		color: white;
		margin-bottom: 20px;
	}

	.visit_block,
	.unvisit_block {
		height: 125px;
		margin-top: 10px;
		margin-bottom: 10px;
		background: white;
		padding: 20px;

		.visit_line,
		.unvisit_line {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #999;
			line-height: 25px;
		}

		.unvisit_line_value,
		.visit_line_value {
			color: black;
		}
	}

	.visit_block {
		height: 180px;
	}



	.nav {
		background: white;

		.flex_between {
			display: flex;

			.nav_title {
				width: 150upx;
				margin-top: 10px;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: "PingFang";
				font-weight: bold;
				color: #999;
			}
		}
	}

	.nav_item {
		margin: auto;
		width: 94%;
		border-bottom: 1px solid #eeeeee;
		background: white;
		padding-bottom: 10px;
		margin-top: 20px;
	}

	.active {
		position: relative;
		color: #1884eb;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 40rpx;
		border-radius: 10upx;
		height: 8rpx;
		background-color: #0a73d5;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.unchecked {
		color: #1884eb;
	}

	.success {
		color: #00d8a0;
	}

	.unpass {
		color: red;
	}
</style>
